<template>
	<view class="page">
		<cu-custom bgColor="bg-F7F7F7" :isBack="true" textRight="true" type="">
			<block slot="backText" >
				<view class="titilestyle">
					{{title}}
				</view>
			</block>
		</cu-custom>
		<view class="content">
			<view class="head flex align-center grid col-3">
				<view class="middle flex flex-direction">
					<view class="top">
						64.6
					</view>
					<view class="bottom text-center">
						里程（公里）
					</view>
					<view class="line">

					</view>
				</view>
				<view class="middle flex flex-direction">
					<view class="top">
						7.6
					</view>
					<view class="bottom text-center">
						减排（千克）
					</view>
					<view class="line">

					</view>
				</view>
				<view class="middle flex flex-direction">
					<view class="top">
						3696
					</view>
					<view class="bottom text-center">
						热量（千卡）
					</view>
				</view>
			</view>
			<view class="list">
				<scroll-view scroll-x class="taber  ">
					<view class="left ">

					</view>
					<view class=" item" v-for="(tab,i) in taber" :key="i" :class="tabIndex==i?'hover':'nohover'"
						@click="changeTab(i)">
						{{tab.name}}
					</view>

				</scroll-view>

				<scroll-view scroll-y="true" class="box">
					<view class="item  " v-for="(item,index) in list" :key="index">

						<view class="top  flex align-center justify-between">

							<view class="left flex align-center basis-xl ">
								<image class="round" :src="res+'/static/motorcycles/img/logo.png'" mode=""></image>
								<text class="title">{{item.title}} </text>
								<text class="sn">{{item.sn}}</text>
							</view>

							<view class="right  basis-xs text-right">
								已完成
							</view>

						</view>
						<view class="botdy flex">
							<view class="left  basis-xl">
								<view class="">
									<text class="cuIcon-title opcity"></text> {{item.create_time}}
								</view>
								<view class="">
									<text class="cuIcon-title text-blue"></text> {{item.start_point}}
								</view>
								<view class="">
									<text class="cuIcon-title text-yellow"></text> {{item.end_point}}
								</view>


							</view>

							<view class="basis-xs right   align-center flex justify-end">
								<view class="">
									<text class="text-df">￥</text>{{item.price}}
								</view>

							</view>




						</view>


						<view class="foot-item flex ">
							<view class="left  basis-df ">
								<view class="">
									<text class="cuIcon-title opcity"></text> 骑行距离
									<text class="title">0.55公里</text>
								</view>
							</view>

							<view class="basis-df right text-right">
								骑行时间
								<text class="title">{{item.time}}</text>
							</view>
						</view>


					</view>
				</scroll-view>

			</view>




		</view>

	</view>
</template>

<script>
	import {
		getList
	} from "@/static/motorcycles/api.js"
	export default {
		data() {
			return {
				title: "行程记录",
				tabIndex: 0,
				res: this.apiHost + "/static/otherApp/",
				taber: [

					{
						name: "全部订单"
					},
					{
						name: "电单车"
					},
					{
						name: "自行车"
					},
					{
						name: "观光车"
					},
					{
						name: "滑板车"
					},
					{
						name: "校外大巴",
						
					}

				],
				list: []
			}
		},
		onLoad() {
			this.geData();
		},
		methods: {
			changeTab(i) {
				console.log("i "+i);
				this.tabIndex = i;
				this.list=[];
				this.geData();
			},
			geData() {
				console.log("tab" + this.tabIndex)
				getList(this.tabIndex).then(r => {
					this.list = r;
					console.log(r)
				})
			}
		}


	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		background-color: #F6F6F6;
	}

	.content {
		$itemW: calc(100vw*(670/750));
		width: 100%;


		.head-img {
			margin: auto;
			width: $itemW;

		}

		.head {
			height: calc(100vw*(180/750));
			background: #F7F7F7;
			border-radius: 20rpx;
			position: relative;
			margin: 0rpx 40rpx;
			background: #FFFFFF;
			font-family: PingFang SC;
			box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.05);

			.middle {
				position: relative;

				.top {
					font-size: 40rpx;
					font-weight: 800;
					color: #333333;
				}

				.bottom {
					margin-top: 18rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}

				.line {
					position: absolute;
					right: 0;
					background: #DBDBDB;
					width: 4rpx;
					height: calc(100vw*(50/750));
				}
			}



		}

		.list {

			.taber {
				width: 100vw;
				height: 60rpx;
				white-space: nowrap;
				margin-top: 40rpx;
				line-height: 60rpx;

				.left {
					display: inline-block;

					width: calc(100vw*(79/750));
				}

				.item {
					height: inherit;
					line-height: 60rpx;
					display: inline-block;
					margin-right: 34rpx;

				}

				font-family: PingFang SC;

				.hover {
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
				}

				.nohover {
					font-size: 28rpx;
					color: #999999;
					font-weight: 500;
				}
			}

			.box {
				width: $itemW;
				margin: auto;

				.item {
					background: #FFFFFF;
					border-radius: 20rpx;
					margin-top: 20rpx;
					position: relative;
					min-height: calc(100vw*(300/750));
					padding: 0 30rpx;

					box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);

					.top {
						height: calc(100vw*(80/750));
						border-bottom: 2rpx solid #F7F7F7;

						image {
							width: calc(100vw*(40/750));
							height: calc(100vw*(40/750));
						}

						.left {
							font-size: 28rpx;

							.title {
								margin-left: 4rpx;
								font-weight: 800;
								color: #333333;
							}

							.sn {
								font-weight: 500;
								color: #999999;
								margin-left: 22rpx;
							}
						}

						.right {
							font-size: 28rpx;
							font-weight: 500;
							color: #999999;
						}

					}

					.botdy {
						font-family: PingFang SC;

						.left {
							font-size: calc(100vw*(24/750));

							font-weight: 500;
							color: #999999;

							view {
								margin-top: 16rpx;
								min-height: calc(100vw*(23/750));

								.opcity {
									opacity: 0;
								}
							}
						}

						.right {
							font-size: 50rpx;
							font-weight: 800;
							color: #333333
						}


						margin-top: 10rpx;
					}


					.foot-item {
						font-size: 24rpx;
						font-family: PingFang SC;
						margin-top: 29rpx;
						padding-bottom: 49rpx;
						font-weight: 500;
						color: #999999;

						.left {
							.title {
								font-weight: 800;
								color: #333333;
								margin-left: 19rpx;
							}

							.opcity {
								opacity: 0;
							}


						}

						.right {
							.title {
								font-weight: 800;
								color: #333333;
								margin-left: 19rpx;
							}
						}
					}
				}
			}
		}

	}
</style>
